<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>折线图</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2.js"></script>
<script>

$.getJSON('./data/3nian.json', json => {
    const source = [];
    let i = 0;

    // let threeYear;

    json.map(a => {
      a.map(obj => {
        obj.value = obj.value * 1;
        source.push(obj);
      });
    });
    let t = performance.now();
    chart = new F2.Chart({
      id: 'mountNode',
      width: 750,
      height: 200,
      pixelRatio: window.devicePixelRatio
    });

    chart.source(source, {
      reportDateTimestamp: {
        type: 'timeCat'
      }
    });
    chart.legend({
      showTitle: true
    });

    chart.line({
      sortable: false
    }).position('reportDateTimestamp*value')
      .color('codeType')
      .animate({
        update: {
          animation: 'lineUpdate'
        }
      });
    chart.render();
    // console.log(performance.now() - t);
  });


/*  $.getJSON('./data/time-2000.json', data => {
    const source = [];
    const tmp = data.data;
    Object.keys(tmp).map(key => {
      source.push({
        time: key * 1,
        value: tmp[key]
      });
    });

    let t = performance.now();
    const chart = new F2.Chart({
      id: 'mountNode',
      width: 750,
      height: 450,
      pixelRatio: window.devicePixelRatio
    });

    chart.source(source, {
      time: {
        type: 'timeCat'
      }
    });

    chart.area({
      sortable: false
    }).position('time*value');
    chart.render();
    console.log(performance.now() - t);
  });*/

/*
  // Bar Chart
  const count = 10;
  const data = [];
  for (let i = 0; i < count; i++) {
    data.push({
      x: i + '',
      y: Math.random() * 1000
    });
  }
 let t = performance.now();
  const chart = new F2.Chart({
    id: 'mountNode',
    width: 750,
    height: 450,
    pixelRatio: window.devicePixelRatio,
    // padding: 40
  });

  chart.source(data);
  chart.interval().position('x*y');
  chart.render();
  console.log(performance.now() - t);
*/

// pie chart
// const data = [{"province":"北京市","population":19612368,"percent":0.015454867859998321, a: '1'},{"province":"天津市","population":12938693,"percent":0.010195902432387832, a: '1'},{"province":"河北省","population":71854210,"percent":0.05662229674328822, a: '1'},{"province":"山西省","population":27500,"percent":0.000021670451326935833, a: '1'},{"province":"内蒙古自治区","population":24706291,"percent":0.01946896278489501, a: '1'},{"province":"辽宁省","population":43746323,"percent":0.03447282048377867, a: '1'},{"province":"吉林省","population":27452815,"percent":0.02163326877254087, a: '1'},{"province":"黑龙江省","population":38313991,"percent":0.030192053712951184, a: '1'},{"province":"上海市","population":23019196,"percent":0.018139504236479854, a: '1'},{"province":"江苏省","population":78660941,"percent":0.06198611248259895, a: '1'},{"province":"浙江省","population":54426891,"percent":0.04288928335607062, a: '1'},{"province":"安徽省","population":59500468,"percent":0.04688734529905102, a: '1'},{"province":"福建省","population":36894217,"percent":0.029073248499778492, a: '1'},{"province":"江西省","population":44567797,"percent":0.03512015547771843, a: '1'},{"province":"山东省","population":95792719,"percent":0.0754862347114306, a: '1'},{"province":"河南省","population":94029939,"percent":0.07409713514088165, a: '1'},{"province":"湖北省","population":57237727,"percent":0.04510426825519785, a: '1'},{"province":"湖南省","population":65700762,"percent":0.05177327872958528, a: '1'},{"province":"广东省","population":104320459,"percent":0.08220623378774927, a: '1'},{"province":"广西壮族自治区","population":46023761,"percent":0.036267479004837365, a: '1'},{"province":"海南省","population":8671485,"percent":0.006833272495445606, a: '1'},{"province":"重庆市","population":28846170,"percent":0.022731255380127876, a: '1'},{"province":"四川省","population":80417528,"percent":0.06337033186750907, a: '1'},{"province":"贵州省","population":34748556,"percent":0.02738243241742924, a: '1'},{"province":"云南省","population":45966766,"percent":0.03622256600944178, a: '1'},{"province":"西藏自治区","population":3002165,"percent":0.002365755291197466, a: '1'},{"province":"陕西省","population":37327379,"percent":0.02941458726478497, a: '1'},{"province":"甘肃省","population":25575263,"percent":0.02015372698236665, a: '1'},{"province":"青海省","population":5626723,"percent":0.004433950069150923, a: '1'}];
//  let t = performance.now();

//   const chart = new F2.Chart({
//     id: 'mountNode',
//     width: window.innerWidth,
//     height: 450,
//     pixelRatio: window.devicePixelRatio,
//     // padding: [ 60, 752, 30, 30 ]
//   });
//   chart.source(data);
//   chart.legend({
//     position: 'right'
//   });
//   chart.coord('polar', {
//     transposed: true
//   });
//   chart.axis(false);
//   chart.interval()
//     .position('a*percent')
//     .color('province')
//     .adjust('stack');

//   chart.render();
//   console.log(performance.now() - t);

 // const data = [
 //    { time: '2016-08-08 00:00:00', tem: 10, city: 'beijing' },
 //    { time: '2016-08-08 00:10:00', tem: 22, city: 'beijing' },
 //    { time: '2016-08-08 00:30:00', tem: 16, city: 'beijing' },
 //    { time: '2016-08-09 00:35:00', tem: 26, city: 'beijing' },
 //    { time: '2016-08-09 01:00:00', tem: 12, city: 'beijing' },
 //    { time: '2016-08-09 01:20:00', tem: 26, city: 'beijing' },
 //    { time: '2016-08-10 01:40:00', tem: 18, city: 'beijing' },
 //    { time: '2016-08-10 02:00:00', tem: 26, city: 'beijing' },
 //    { time: '2016-08-10 02:20:00', tem: 12, city: 'beijing' },
 //    { time: '2016-08-08 00:00:00', tem: 4, city: 'hangzhou' },
 //    { time: '2016-08-08 00:10:00', tem: 3, city: 'hangzhou' },
 //    { time: '2016-08-08 00:30:00', tem: 6, city: 'hangzhou' },
 //    { time: '2016-08-09 00:35:00', tem: -12, city: 'hangzhou' },
 //    { time: '2016-08-09 01:00:00', tem: 1, city: 'hangzhou' },
 //    { time: '2016-08-09 01:20:00', tem: 9, city: 'hangzhou' },
 //    { time: '2016-08-10 01:40:00', tem: 13, city: 'hangzhou' },
 //    { time: '2016-08-10 02:00:00', tem: -3, city: 'hangzhou' },
 //    { time: '2016-08-10 02:20:00', tem: 11, city: 'hangzhou' }
 //  ];
 //  const chart = new F2.Chart({
 //    id: 'mountNode',
 //    width: window.innerWidth,
 //    height: window.innerWidth * 0.64,
 //    pixelRatio: window.devicePixelRatio
 //  });
 //  chart.source(data, {
 //    time: {
 //      type: 'timeCat',
 //      tickCount: 3,
 //      mask: 'hh:mm',
 //      range: [ 0, 1 ]
 //    },
 //    tem: {
 //      tickCount: 3,
 //      formatter(item) {
 //        return item + '%';
 //      }
 //    }
 //  });
 //  chart.axis('tem', {
 //    grid(text) {
 //      if (text === '0%') {
 //        return {
 //          stroke: '#efefef'
 //        };
 //      }
 //      return {
 //        stroke: '#f7f7f7'
 //      };

 //    },
 //    label: {
 //      fontSize: 14
 //    }
 //  });
 //  chart.axis('time', {
 //    line: null,
 //    label: {
 //      fontSize: 14
 //    }
 //  });
 //  // 添加辅助元素
 //  const point = [ '2016-08-10 02:20:00', 12 ];
 //  chart.guide().html({
 //    position: point,
 //    html: "<div style='border-radius: 12px;border: none;width: 22px;height: 22px;background-color: rgba(102, 182, 241, 0.5);'></div>"
 //  });
 //  chart.guide().html({
 //    position: point,
 //    html: "<div style='border-radius: 7px;border: none;width: 12px;height: 12px;background-color: rgb(15, 141, 232);'></div>"
 //  });
 //  chart.line().position('time*tem')
 //    .color('city')
 //    .size(3)
 //    .shape('city', function(city) {
 //      if (city === 'beijing') {
 //        return 'line';
 //      }
 //      if (city === 'hangzhou') {
 //        return 'dash';
 //      }
 //    });

 //  chart.render();
 //  chart.repaint();

</script>
</body>
</html>
